<template>
  <!-- 支付 -->
  <div class="internal">
    <navbar :text="$route.params.text"></navbar>
    <div class="context">
      <div class="top">
        <div class="title">订单将在30分钟后失效，请尽快完成支付</div>
      </div>
      <div class="info">
        <div class="order">
          <div>订单号</div>
          <span>{{ getRandomIntInclusive }}</span>
        </div>
        <div class="cate">
          <div>订单类型</div>
          <span>挂号</span>
        </div>
        <div class="money">
          <div>总费用</div>
          <span>{{ price }}</span>
        </div>
      </div>
      <div class="canno">
        <div>该订单暂不支持医保支付</div>
      </div>
      <div class="handel">现金支付：{{ price }}</div>
      <div class="paycate">
        <div class="title">选择支付方式</div>
        <div class="zhi">
          <img src="../../../assets/images/pay3.jpg" alt="">
          <span>支付宝</span>
          <input type="radio" v-model="checkbox" value="支付宝">
        </div>
        <div class="wei">
          <img src="../../../assets/images/pay2.jpg" alt="">
          <span>微信</span>
          <input type="radio" v-model="checkbox" value="微信">
        </div>

        <div class="wei" v-for="item in items" :key="item._id">
          <img :src="getimg(item.bankname)" alt="">
          <span>{{ getname(item.bankname) }}</span>
          <input type="radio" v-model="checkbox" :value="item.bankname">
        </div>
      </div>
      <div class="pay">
        <div class="money">
          <div>
            总费用
          </div>
          <span style="color:red">{{ price }}</span>
        </div>
        <div class="check" @click="show = true">
          <div>确认</div>
          <span>( {{ price }} )</span>
        </div>
      </div>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <!-- 密码输入框 -->
          <van-password-input :value="value" :focused="showKeyboard" @focus="showKeyboard = true"
            :error-info="errorInfo" />
          <!-- 数字键盘 -->
          <van-number-keyboard v-model="value" :show="true" @blur="showKeyboard = false" />
          <!-- <van-button round type="info">圆形按钮</van-button> -->
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import navbar from "../../../components/navbar.vue";
import { mapState } from "vuex";
import axios from "axios";
import img1 from '../../../assets/images/img1.jpg'
import img2 from '../../../assets/images/img2.png'
import img3 from '../../../assets/images/img3.jpg'
import img4 from '../../../assets/images/img4.jpg'
import img5 from '../../../assets/images/img5.jpg'
import { Overlay, PasswordInput, NumberKeyboard, Button, Toast } from 'vant'
export default {
  components: {
    navbar,
    [Overlay.name]: Overlay,
    [PasswordInput.name]: PasswordInput,
    [NumberKeyboard.name]: NumberKeyboard,
    [Button.name]: Button,
    [Toast.name]: Toast
  },
  data() {
    return {
      ordernumber: '',
      items: [],
      checkbox: '微信',
      show: false,
      value: '',
      showKeyboard: false,
      errorInfo: '',
      orderinfo: {}
    }
  },
  computed: {
    ...mapState("doctor", ["price", 'order', 'visitor', 'day', 'doctorid', 'num']),
    getRandomIntInclusive() {
      let num = Math.floor(Math.random() * (999999999 - 100000000 + 1)) + 100000000;
      this.ordernumber = num;
      return num;
    },
  },
  methods: {

    showaction() {
      this.show = !this.show;
    },
    async getcard() {
      let res = await axios.request({
        method: "post",
        url: "/api/bank/inquirebank",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      });
      console.log(res.data.data)
      this.items = res.data.data;
    },
    getimg(name) {
      if (name == '中国农业银行') {
        return img1;
      } else if (name == '中国招商银行') {
        return img2;
      } else if (name == '中国建设银行') {
        return img3;
      } else if (name == '中国工商银行') {
        return img4;
      } else {
        return img5;
      }
    },
    getname(name) {
      // console.log(name);
      if (name == '中国农业银行') {
        return '中国农业银行储蓄卡';
      } else if (name == '中国招商银行') {
        return '中国招商银行储蓄卡';
      } else if (name == '中国建设银行') {
        return '中国建设银行储蓄卡';
      } else if (name == '中国工商银行') {
        return '中国工商银行储蓄卡';
      } else {
        return '中国人民银行储蓄卡';
      }
    },
    async generateorders() {
      console.log('=============');
      let items = {
        patientID: this.visitor._id,
        department: this.order.department,
        state: 1,
        doctor: this.order.doctor,
        date: this.order.day,
        number: this.ordernumber,
        price: this.price,
        time: this.order.timer,
        hospitalname: 'xxx医院',
        position: this.order.position
      }
      let res = await axios.request({
        method: "post",
        url: "/api/registeredOrder",
        data: items,
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      });
      this.orderinfo = res.data.data;
      console.log('============>返回结果', res.data.data);
    },
    async reducedoctor(id) {
      let res = await axios.request({
        method: "post",
        url: "/api/cate/reduce",
        data: { id: id, value: this.num - 1 },
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      });
      console.log('医生修改数量后', res);
    }
  },
  mounted() {
    this.getcard();
    this.generateorders();
    this.reducedoctor(this.doctorid);
  },
  watch: {
    async value(value) {
      if (value.length === 6 && value !== '123456') {
        Toast('密码错误')
      } else if (value.length === 6 && value == '123456') {
        Toast('密码正确')
        let res = await axios.request({
          method: "patch",
          url: "/api/registeredOrder",
          data: { _id: this.orderinfo._id, state: 2 },
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        });
        console.log('修改状态========》', res);
        this.$router.replace({
          name: "PaymentResults",
          params: { text: "支付结果", id: this.orderinfo._id },
        });
      }
    },
  },

};
</script>

<style scoped lang="scss">
@function vw($px) {
  @return ($px/375) * 100vw;
}

.context {
  position: relative;
  top: 46px;
  z-index: 1;
  height: calc(100% - 46px);
  overflow: auto;

  .top {
    width: 100%;
    height: vw(150);
    background-color: rgba(46, 199, 201, 1);
    position: relative;

    .title {
      width: 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      top: vw(45);
      color: #fff;
      font-size: vw(17);
    }
  }

  .info {
    position: absolute;
    left: 50%;
    top: vw(100);
    transform: translateX(-50%);
    width: vw(339);
    height: vw(132);
    background-color: #fff;
    border-radius: vw(5);
    z-index: 1;

    .order,
    .cate,
    .money {
      display: flex;
      font-size: vw(15);
      padding: 0 vw(30);
      margin-top: vw(22);
    }

    .order {
      span {
        margin-left: vw(50);
      }
    }

    .cate {
      span {
        margin-left: vw(35);
      }
    }

    .money {
      span {
        margin-left: vw(46);
        color: red;
      }
    }
  }

  .canno {
    position: absolute;
    width: vw(339);
    height: vw(62);
    background-color: #fff;
    top: vw(242);
    left: 50%;
    transform: translateX(-50%);
    border-radius: vw(5);
    display: flex;
    align-items: center;

    div {
      font-size: vw(16);
      padding: 0 vw(30);
    }
  }

  .handel {
    position: absolute;
    top: vw(320);
    left: vw(20);
    font-size: vw(14);
    color: #999;
  }

  .paycate {
    position: absolute;
    width: vw(339);
    // height: vw(110);
    background-color: #fff;
    left: 50%;
    transform: translateX(-50%);
    top: vw(350);
    border-radius: vw(5);

    div {
      display: flex;
      align-items: center;
      padding: vw(10) 0;
    }

    img {
      width: vw(20);
      border-radius: 50%;
    }

    span {
      margin-left: vw(6);
    }

    .zhi,
    .wei {
      display: flex;
    }

    .title,
    .zhi,
    .wei {
      padding: 0 vw(30);
      margin: vw(10) 0;
      font-size: vw(14);
      position: relative;
    }

    input {
      position: absolute;
      right: vw(100);
      width: vw(16);
    }
  }

  .low {
    font-size: vw(17);
    margin: 0 auto;
    text-align: center;
  }

  .more {
    position: absolute;
    width: vw(339);
    height: vw(110);
    background-color: #fff;
  }

  .pay {
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    top: vw(710);
    height: vw(55);
    background-color: #fff;
    justify-content: space-between;

    div {
      display: flex;
    }

    .check {
      background-color: rgba(46, 199, 201, 1);
      width: vw(143);
      height: vw(44);
      border-radius: vw(5);
      color: #fff;
      font-size: vw(17);
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 vw(10);

      div {
        margin-left: vw(6);
      }

      span {
        margin: 0 vw(10);
      }
    }

    .money {
      margin: 0 vw(20);

      span {
        margin: 0 vw(20);
      }
    }
  }
}

ul {
  position: fixed;
  bottom: vw(260);
  left: 50%;
  transform: translateX(-50%);
}
</style>
